<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="题库">
          <el-select v-model="listQuery.category" size="mini" clearable>
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题型">
          <el-select v-model="listQuery.type" size="mini" clearable>
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目">
          <el-input
            v-model="listQuery.content"
            type="text"
            size="mini"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-dropdown @command="addTopic">
            <el-button
              class="filter-item"
              size="small"
              round
              icon="el-icon-plus"
            >
              新增
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="0">添加单选题</el-dropdown-item>
              <el-dropdown-item :command="1">添加多选题</el-dropdown-item>
              <el-dropdown-item :command="2">添加判断题</el-dropdown-item>
              <el-dropdown-item :command="3">添加填空题</el-dropdown-item>
              <el-dropdown-item :command="4">添加简答题</el-dropdown-item>
              <!-- <el-dropdown-item command="5"
                >添加单选题（图片）</el-dropdown-item
              >
              <el-dropdown-item command="6"
                >添加多选题（图片）</el-dropdown-item
              > -->
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        highlight-current-row
        height="500"
      >
        <el-table-column type="selection" />
        <el-table-column
          label="题库"
          prop="category"
          width="150px"
          align="center"
          :formatter="categoryListFormatter"
        />
        <el-table-column
          label="类型"
          prop="type"
          width="150px"
          align="center"
          :formatter="
            (row, column, cellValue) => {
              return typeList[cellValue]
            }
          "
        />
        <el-table-column label="题目" prop="content" min-width="300px" />
        <el-table-column label="题解" prop="solution" min-width="200px" />
        <el-table-column
          label="难度"
          prop="difficulty"
          width="100px"
          :formatter="
            (row, column, cellValue) => {
              return difficultyList[cellValue]
            }
          "
        />
        <el-table-column label="分数" prop="score" width="100px" />
        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="compile(row)">编辑</el-dropdown-item>
                <el-dropdown-item @click.native="deleteData(row)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
    </div>
    <SingleChoice :dialogsingle="dialogsingle" />
    <MultipleChoice :dialogmultiple="dialogmultiple" />
    <Judge :dialogjudge="dialogjudge" />
    <GapFlling :dialoggap="dialoggap" />
    <ShortAnswer :dialogshort="dialogshort" />
  </div>
</template>

<script>
import { deleteTestquestions, compileTestquestions } from '@/api/ts/question.js'
import { listDictTreeItem } from '@/api/base/dict.js'
import Pagination from '@/components/Pagination'
import { getsaveList } from '@/api/ts/question.js'
// 选择组件
import SingleChoice from '@/components/Questiontypes/SingleChoice.vue'
import MultipleChoice from '@/components/Questiontypes/MultipleChoice'
import Judge from '@/components/Questiontypes/Judge'
import GapFlling from '@/components/Questiontypes/GapFlling'
import ShortAnswer from '@/components/Questiontypes/ShortAnswer'

export default {
  components: {
    SingleChoice,
    Judge,
    GapFlling,
    Pagination,
    ShortAnswer,
    MultipleChoice
  },
  data() {
    return {
      command: '',
      category: '',
      dialogsingle: {},
      dialogjudge: '',
      dialoggap: '',
      dialogshort: '',
      dialogmultiple: '',
      categoryOptions: [],
      typeOptions: [
        {
          label: '单选题',
          value: '1'
        },
        {
          label: '多选题',
          value: '2'
        },
        {
          label: '判断题',
          value: '3'
        },
        {
          label: '填空题',
          value: '4'
        },
        {
          label: '简答题',
          value: '5'
        }
      ],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        category: '',
        type: '',
        content: ''
      },
      total: 10,
      listLoading: false,
      list: [{}],
      typeList: {
        1: '单选题',
        2: '多选题',
        3: '判断题',
        4: '填空题',
        5: '简答题'
      },
      difficultyList: {
        1: '容易',
        2: '常规',
        3: '较难',
        4: '很难'
      },
      categoryList: {}
    }
  },
  mounted() {
    this.listDictTreeItem()
    this.getList()
  },
  methods: {
    addTopic(index) {
      if (index === 0) {
        this.dialogsingle = {
          dialogsingle: true,
          label: '添加',
          sort: '1',
          categoryOptions: this.categoryOptions
        }
      } else if (index === 1) {
        this.dialogmultiple = {
          dialogmultiple: true,
          label: '添加',
          sort: '1',
          categoryOptions: this.categoryOptions
        }
      } else if (index === 2) {
        this.dialogjudge = {
          dialogjudge: true,
          label: '添加',
          sort: '1',
          categoryOptions: this.categoryOptions
        }
      } else if (index === 3) {
        this.dialoggap = {
          label: '添加',
          sort: '1',
          dialoggap: true,
          categoryOptions: this.categoryOptions
        }
      } else if (index === 4) {
        this.dialogshort = {
          label: '添加',
          sort: '1',
          dialogshort: true,
          categoryOptions: this.categoryOptions
        }
      }
    },
    // 获取题库列表
    async listDictTreeItem() {
      let dataList = await listDictTreeItem({
        dictGroupCode: 'examination_question_category',
        parentDictId: 0
      })
      this.categoryOptions = dataList.data
      console.log(dataList, 'dataList')
      this.categoryList = dataList.data
    },
    // 分页
    // 获取试题列表
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      getsaveList(this.listQuery)
        .then((response) => {
          this.list = response.data.rows
          this.total = response.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 搜索
    search() {
      this.getList(this.listQuery)
    },

    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    },
    // 删除事件
    async deleteData(row) {
      let examinationQuestionId = row.examinationQuestionId
      let data = await deleteTestquestions({
        examinationQuestionId: examinationQuestionId
      })
      console.log(data)
      if (data.code == 1) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getList()
      } else {
        this.$message.error({
          message: '删除失败'
        })
      }
    },
    // 编辑事件
    async compile(row) {
      let examinationQuestionId = row.examinationQuestionId
      let data = await compileTestquestions({
        examinationQuestionId: examinationQuestionId
      })
      console.log(data)
      if (data.data.type == 1) {
        this.dialogsingle = {
          label: '编辑',
          sort: '2',
          dialogsingle: true,
          categoryOptions: this.categoryOptions,
          form: data.data,
          examinationQuestionId: examinationQuestionId,
          optkey:data.data.options.length
        }
      } else if (data.data.type == 2) {
        this.dialogmultiple = {
          label: '编辑',
          sort: '2',
          dialogmultiple: true,
          categoryOptions: this.categoryOptions,
          form: data.data,
          examinationQuestionId: examinationQuestionId,
          optkey:data.data.options.length
        }
      } else if (data.data.type == 3) {
        this.dialogjudge = {
          label: '编辑',
          sort: '2',
          dialogjudge: true,
          categoryOptions: this.categoryOptions,
          form: data.data,
          examinationQuestionId: examinationQuestionId
        }
      } else if (data.data.type == 4) {
        this.dialoggap = {
          label: '编辑',
          sort: '2',
          dialoggap: true,
          categoryOptions: this.categoryOptions,
          form: data.data,
          examinationQuestionId: examinationQuestionId
        }
      } else if (data.data.type == 5) {
        this.dialogshort = {
          label: '编辑',
          sort: '2',
          dialogshort: true,
          categoryOptions: this.categoryOptions,
          form: data.data,
          examinationQuestionId: examinationQuestionId
        }
      }
    },
    categoryListFormatter(row, column, cellValue) {
      let categoryList = ''
      if (this.categoryList.length > 0) {
        this.categoryList.map((item) => {
          if (item.value == cellValue) {
            return (categoryList = item.label)
          }
        })
      }

      return categoryList
    }
  }
}
</script>